<script setup lang="ts">

</script>
    
<template>
    <div class="container">
        <div class="header">
            <div>课程公告</div>

            <button class="button">
                <el-icon>
                    <Lock />
                </el-icon>&nbsp;发布公告
            </button>
        </div>
        <div class="search">
            <SearchBar></SearchBar>

        </div>
        <div class="newList">
            <div class="item animate__animated animate__fadeInUp" v-for="i in 12">
                <img src="https://codelover.club/stutasks/userID_58/currNo_11/资源/FnbjAu25RvykXrTWIPc1mfuMkvzH.gif"
                    alt="">
                <div class="content">
                    <div style="font-size: 18px;margin-bottom: 20px;">学生会招贤纳士</div>
                    <span style="font-size:14px ;color:#6c6c6c;">学生会是学校联系广大同学的桥梁和纽带，服务同学的主要领域是学业发展、身心健康、社会融入、权益维护等...</span>
                </div>
                <div>
                    <button class="button">
                        <el-icon>
                            <Unlock />
                        </el-icon>&nbsp;查看
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.header {
    @include flex(space-between);
}

.search {
    margin: 20px 0;
}

.newList {
    position: absolute;
    width: 85%;
    height: 75%;
    overflow: auto;

    .item {
        @include flex(flex-start);
        margin-bottom: 20px;
        border-bottom: 1px solid #d8d8d8;

        img {
            width: 150px;
            height: 100px;
        }

        .content {
            padding: 10px;
            width: 600px;
            @include flex-column(normal, normal);
        }
    }

}
</style>